<template>
  <j-modal
    width="80%"
    :title="kfbTitle"
    :visible.sync="desformApplyVisible"
    :fullscreen.sync="fullscreen"
    :switch-fullscreen="switchFullscreen"
    :maskClosable="false"
    :destroyOnClose="true"
  >
  <template slot="footer">
    <a-button key="back" @click="desformApplyHandleCancel">
      取消
    </a-button>
    <a-button key="submit" type="primary" @click="desformApplyHandleOk">
      确定
    </a-button>
  </template>
    <a-spin :spinning="spinning" :delay="200">
      <k-form-build ref="kfb" :value="kfdJsonData" />
    </a-spin>
  </j-modal>
</template>
<script>
import { saveOrUpdate } from '@/api/process'
import { getFormByProcessDefinitionId } from '@/api/process'
import { KFormBuild } from '@/components/k-form-design/index'
import { startInstance } from '@/api/process'
export default {
  name: 'ProcessApplyModal',
  components: {
    KFormBuild
  },
  data() {
    return {
      kfbTitle: '',
      desformApplyVisible: false,
      fullscreen: false,
      switchFullscreen: true,
      kfdJsonData: {},
      url: {
        list: '/activiti/models/listAll'
      },
      modelId: '',
      formId: '',
      processDefinitionId: '',
      spinning: false
    }
  },
  methods: {
    desformApplyHandleCancel() {
      this.desformApplyVisible = false
    },
    async desformApplyHandleOk() {
      try {
        const formData = await this.$refs.kfb.getData()
        const res = await saveOrUpdate({
          modelId: this.modelId,
          formId: this.formId,
          processDefinitionId: this.processDefinitionId,
          formData: JSON.stringify(formData),
          type: 2
        })
        if (res.success) {
          this.desformApplyVisible = false
          // this.$message.success('保存成功')
          const res2 = await startInstance({
            modelId: res.result.modelId,
            formDataId: res.result.id,
            processDefinitionId: res.result.processDefinitionId
          })
          if (res2.success) {
            this.$message.success('流程申请成功')
          } else {
            this.$message.warning(res.message)
          }
          // this.$router.push({ path: '/process/ExtActDesignFlowDataList' })
        } else {
          this.$message.warning(res.message)
        }
      } catch (err) {
        console.log(err)
      }
    },
    getProcessData(item) { // 根据modelId请求流程最新的发布数据
      this.spinning = true
      getFormByProcessDefinitionId({
        modelId: item.id,
        processDefinitionId: item.processDefinitionId
      }).then(res => {
        if (res.success) {
          if (!res.result) {
            return this.$message.warning('该工单未设计表单')
          }
          this.modelId = item.id
          this.formId = res.result.id
          this.processDefinitionId = item.processDefinitionId
          this.kfbTitle = '表单【' + item.name + '】发起申请'
          this.kfdJsonData = JSON.parse(res.result.htmlJson)
          this.desformApplyVisible = true
        } else {
          this.$message.warning(res.message)
        }
        this.spinning = false
      })
    },
    showModel(item) {
      this.getProcessData(item)
    }
  }
}
</script>
<style lang="less">

</style>
